<template>
    <div class="sc-home">
        <!-- <h4 style="color: #415a6b">Hi admin管理员</h4>
        <h3 style="color: #415a6b; margin-top: 10px">欢迎使用{{ schoolName }}学校智慧校园管理平台</h3> -->
        <!-- 数字展示 -->
        <div class="top">
            <ul class="card-list flex-row-sb-c">
                <li v-if="currentSchool.primary">
                    <div class="title flex-col-c-c">
                        <count-to :start-val="0" :end-val="currentSchool.primary" :duration="3000" class="chart-num"/>
                        <span>小学人数</span>
                    </div>
                </li>
                <li v-if="currentSchool.junior">
                    <div class="title flex-col-c-c">
                        <count-to :start-val="0" :end-val="currentSchool.junior" :duration="3000" class="chart-num"/>
                        <span>初中人数</span>
                    </div>
                </li>
                <li v-if="currentSchool.highSchool">
                    <div class="title flex-col-c-c">
                        <count-to :start-val="0" :end-val="currentSchool.highSchool" :duration="3000" class="chart-num"/>
                        <span>高中人数</span>
                    </div>
                </li>
                <li v-if="currentSchool.teacher">
                    <div class="title flex-col-c-c">
                        <count-to :start-val="0" :end-val="currentSchool.teacher" :duration="3000" class="chart-num"/>
                        <span>教师总数</span>
                    </div>
                </li>
                <!-- <li v-if="currentSchool.contract">
                    <div class="title flex-col-c-c">
                        <div class="chart-num">{{ currentSchool.contract }}</div>
                        <span>使用率</span>
                    </div>
                </li> -->
                <li v-if="currentSchool.contract">
                    <div class="title flex-col-c-c">
                        <count-to v-if="leaveTotal" :start-val="0" :end-val="leaveTotal" :duration="3000" class="chart-num"/>
                        <div v-else class="chart-num">-</div>
                        <span>请假人数</span>
                    </div>
                </li>
                <li v-if="currentSchool.contract">
                    <div class="title flex-col-c-c">
                        <count-to v-if="mentaryCarTotal" :start-val="0" :end-val="mentaryCarTotal" :duration="3000" class="chart-num"/>
                        <div v-else class="chart-num">-</div>
                        <span>补卡人数</span>
                    </div>
                </li>
                <li v-if="currentSchool.contract">
                    <div class="title flex-col-c-c">
                        <count-to v-if="temperatureAnomalies" :start-val="0" :end-val="temperatureAnomalies" :duration="3000" class="chart-num"/>
                        <div v-else class="chart-num">-</div>
                        <span>体温异常</span>
                    </div>
                </li>
            </ul>
        </div>

        <div class="bottom flex-row">
            <div class="bottom-left">
                <div class="box">
                    <Title>
                        <div class="flex-row-l-c">
                        <img src="/static/admin/img/arrow.png" style="width: 11px; height: 18px; margin-right: 10px" />
                        <span>校园考勤</span>
                        </div>
                    </Title>
                    <div class="kaoqin-main flex-col">
                        <div class="kaoqin-top flex-row">
                            <div class="new-list">
                                <div class="avatar" :style="{ background: `url(${currentAvayar}) no-repeat center center` }"></div>
                                <div class="news-box">
                                    <div class="new-item flex-row-sb-c" v-for="(item, index) in hikMessageData" :key="index">
                                        <div class="left del-text" :style="{ color: index == 0 ? '#2492FF !important' : '' }">
                                            {{ item.personName }}
                                        </div>
                                        <div class="left del-text" :style="{ color: index == 0 ? '#2492FF !important' : '' }">
                                            {{ item.bodyTemperature }}℃
                                        </div>
                                        <!-- <div class="left del-text">{{ item.noticeTitle }}</div> -->
                                        <div class="left del-text" :style="{ color: index == 0 ? '#2492FF !important' : '' }">
                                            {{ item.createTime || '/' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="kaoqin-bottom">
                            <div class="kaoqinLineChart">
                                <LineChart :lineData="lineData"></LineChart>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box news">
                    <Title>
                        <div class="flex-row-l-c">
                        <img src="/static/admin/img/arrow.png" style="width: 11px; height: 18px; margin-right: 10px" />
                        <span>校园通知</span>
                        </div>
                    </Title>
                    <div class="main-table">
                        <el-table
                            :data="noticTableData"
                            :cell-style="{ background: 'linear-gradient(180deg, #f1f5fa, #f1f5fa)', border: 'none' }"
                            :header-cell-style="{ background: 'linear-gradient(180deg, #f1f5fa 0%, #f1f5fa)' }"
                        >
                            <el-table-column type="index" label="序号" width="50">
                                <template slot-scope="scope">
                                    <div class="tab-num flex-row-c-c">
                                        <span>{{ scope.$index + 1 }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="noticeTitle" label="标题" align="center"></el-table-column>
                            <el-table-column prop="noticeStartTime" label="开始时间" align="center"></el-table-column>
                            <el-table-column prop="noticeEndTime" label="结束时间" align="center"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

            <div class="bottom-right">
                <div class="box">
                    <Title>
                        <div class="flex-row-l-c">
                        <img src="/static/admin/img/arrow.png" style="width: 11px; height: 18px; margin-right: 10px" />
                        <span>请假列表</span>
                        </div>
                    </Title>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="全部" name="-1"></el-tab-pane>
                        <el-tab-pane label="未审核" name="0"></el-tab-pane>
                        <el-tab-pane label="已通过" name="1"></el-tab-pane>
                        <el-tab-pane label="被驳回" name="2"></el-tab-pane>
                    </el-tabs>
                    <el-table
                        :data="leaveTableData"
                        :cell-style="{ background: 'linear-gradient(180deg, #f1f5fa, #f1f5fa)', border: 'none' }"
                        :header-cell-style="{ background: 'linear-gradient(180deg, #f1f5fa 0%, #f1f5fa)' }"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <div class="tab-num flex-row-c-c">
                                    <span>{{ scope.$index + 1 }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="studentName" label="姓名" align="center" width="80"></el-table-column>
                        <el-table-column prop="levelName" label="班级" align="center" width="80"></el-table-column>
                        <el-table-column prop="applyReason" label="请假原因" align="left" width="300">
                            <span slot-scope="{ row }">
                                <el-link type="info" @click="handleShowDetail(row.applyReason)" v-if="row.applyReason">
                                    {{ row.applyReason.substring(0, 15) }}{{ row.applyReason.length > 15 ? '...' : '' }}
                                </el-link>
                                <span v-else>/</span>
                            </span>
                        </el-table-column>
                        <el-table-column prop="reviewName" label="审批人" align="center" width="80">
                            <span slot-scope="{ row }">
                                {{ row.reviewName || '/' }}
                            </span>
                        </el-table-column>
                        <el-table-column prop="approveStatus" label="审核状态" align="center">
                            <span slot-scope="{ row }">
                                <el-tag type="success" v-if="row.approveStatus === 1">审核通过</el-tag>
                                <el-tag type="danger" v-else-if="row.approveStatus === 2">审核驳回</el-tag>
                                <el-tag type="info" v-else>未审核</el-tag>
                            </span>
                        </el-table-column>
                        <el-table-column prop="approveResult" label="审批结果" align="left" width="300">
                            <span slot-scope="{ row }">
                                <el-link type="info" @click="handleShowaApproveResult(row.approveResult)" v-if="row.approveResult">
                                    {{ row.approveResult.substring(0, 15) }}{{ row.approveResult.length > 15 ? '...' : '' }}
                                </el-link>
                                <span v-else>/</span>
                            </span>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="box">
                    <Title>
                        <div class="flex-row-l-c">
                        <img src="/static/admin/img/arrow.png" style="width: 11px; height: 18px; margin-right: 10px" />
                        <span>补卡列表</span>
                        </div>
                    </Title>
                    <el-table
                        :data="mentaryCardData"
                        :cell-style="{ background: 'linear-gradient(180deg, #f1f5fa, #f1f5fa)', border: 'none' }"
                        :header-cell-style="{ background: 'linear-gradient(180deg, #f1f5fa 0%, #f1f5fa)' }"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <div class="tab-num flex-row-c-c">
                                    <span>{{ scope.$index + 1 }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="studentName" label="姓名" align="center" width="80"></el-table-column>
                        <el-table-column prop="levelName" label="班级" align="center" width="80"></el-table-column>
                        <el-table-column prop="reason" label="补卡原因" align="left" width="300">
                            <span slot-scope="{ row }">
                                <el-link type="info" @click="handleShowDetail(row.applyReason)" v-if="row.applyReason">
                                    {{ row.applyReason.substring(0, 15) }}{{ row.applyReason.length > 15 ? '...' : '' }}
                                </el-link>
                                <span v-else>/</span>
                            </span>
                        </el-table-column>
                        <el-table-column prop="cardStatus" label="审核状态" align="center">
                            <span slot-scope="{ row }">
                                <el-tag type="success" v-if="row.cardStatus === 0">制作中</el-tag>
                                <el-tag type="danger" v-else-if="row.cardStatus === 1">制作完成</el-tag>
                                <el-tag type="info" v-else-if="row.cardStatus === 2">申请中</el-tag>
                                <el-tag type="info" v-else>未审核</el-tag>
                            </span>
                        </el-table-column>
                        <el-table-column prop="approveResult" label="审批结果" align="left" width="300">
                            <span slot-scope="{ row }">
                                <el-link type="info" @click="handleShowaApproveResult(row.approveResult)" v-if="row.approveResult">
                                    {{ row.approveResult.substring(0, 15) }}{{ row.approveResult.length > 15 ? '...' : '' }}
                                </el-link>
                                <span v-else>/</span>
                            </span>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <el-dialog title="请假详情" v-dialogdrag :visible.sync="showApplyReasonDetail" width="40%">
            <el-card class="box-card" shadow="hover">
                {{ applyReasonDetail }}
            </el-card>
            <span slot="footer">
                <el-button @click="showApplyReasonDetail = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="审批结果" v-dialogdrag :visible.sync="showapproveResult" width="40%">
            <el-card class="box-card" shadow="hover">
                {{ approveResult }}
            </el-card>
            <span slot="footer">
                <el-button @click="showapproveResult = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="消息" v-dialogdrag :visible.sync="showMsgInfo" width="40%">
            <el-card class="box-card" shadow="hover">
                {{ msgInfo }}
            </el-card>
            <span slot="footer">
                <el-button @click="showMsgInfo = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Title from './components/title'
import LineChart from './components/lineChart'
import * as Echarts from 'echarts'

let timeOut = null

function getUrlParams(key) {
    try {
        return new RegExp('(\\?|&)' + key + '=([^&]*)(&|$|#)').exec(location.href)[2]
    } catch (e) {
        return null
    }
}

export default {
    components: {Title, LineChart},
    data() {
        return {
            schoolName: this.$store.state.team.currTeam.schoolName,
            counts: {},
            currentIndex: '', //当前选中索引
            chart: {
                topChart1: '',
                topChart2: '',
                topChart3: '',
                bottomLeftChart2: '',
            },
            leaveTableData: [],
            leaveTotal: '-',
            showApplyReasonDetail: false,
            applyReasonDetail: '',
            showapproveResult: false,
            approveResult: '',
            showMsgInfo: false,
            msgInfo: '',
            noticTableData: [],
            hikMessageData: [],
            msdMessagData: [],
            mentaryCardData: [],
            mentaryCarTotal: 0,
            activeName: '-1',
            currentAvayar: '',
            lineData: [],
            tabsList: {
                20: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 0,
                    contract: 0,
                    messageCount: [],
                },
                19: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 0,
                    contract: 0,
                    messageCount: [],
                },
                18: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 0,
                    contract: 0,
                    messageCount: [],
                },
                17: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 0,
                    contract: 0,
                    messageCount: [],
                },
                16: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 0,
                    contract: 0,
                    messageCount: [],
                },
                15: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 0,
                    contract: 0,
                    messageCount: [2313, 30, 2313, 20, 2313, 15, 2313],
                },
                14: {
                    primary: 0,
                    junior: 1216,
                    highSchool: 0,
                    teacher: 87,
                    contract: 0,
                    messageCount: [1303, 30, 1283, 20, 1293, 15, 1299],
                },
                13: {
                    primary: 0,
                    junior: 0,
                    highSchool: 3055,
                    teacher: 266,
                    contract: 0,
                    messageCount: [3055 + 246, 30, 3055 + 256, 20, 3055 + 266, 15, 3055 + 266],
                },
                12: {
                    primary: 2313,
                    junior: 0,
                    highSchool: 0,
                    teacher: 147,
                    contract: 0,
                    messageCount: [2313 + 147, 30, 2313 + 145, 20, 2313 + 137, 15, 2313 + 141],
                },
                11: {
                    primary: 0,
                    junior: 1429,
                    highSchool: 3529,
                    teacher: 389,
                    contract: 0,
                    messageCount: [4958 + 379, 30, 4958 + 384, 20, 4958 + 381, 15, 4958 + 388],
                },
                10: {
                    primary: 0,
                    junior: 0,
                    highSchool: 3215 + 2409 + 269,
                    teacher: 196,
                    contract: 0,
                    messageCount: [5893 + 194, 30, 5893 + 191, 20, 5893 + 188, 15, 5893 + 187],
                },
                9: {
                    primary: 492,
                    junior: 296,
                    highSchool: 1660,
                    teacher: 289,
                    contract: 0,
                    messageCount: [2448 + 284, 30, 2448 + 285, 20, 2448 + 277, 15, 2448 + 279],
                },
                8: {
                    primary: 0,
                    junior: 0,
                    highSchool: 0,
                    teacher: 168,
                    contract: 0,
                    messageCount: [],
                },
                7: {
                    primary: 0,
                    junior: 2949,
                    highSchool: 0,
                    teacher: 236,
                    contract: 0,
                    messageCount: [2949 + 234, 30, 2949 + 231, 20, 2949 + 228, 15, 2949 + 229],
                },
                6: {
                    primary: 872,
                    junior: 361,
                    highSchool: 0,
                    teacher: 89,
                    contract: 0,
                    messageCount: [1131 + 86, 30, 1131 + 82, 20, 1131 + 81, 15, 1131 + 88],
                },
                5: {
                    primary: 0,
                    junior: 1258,
                    highSchool: 0,
                    teacher: 253,
                    contract: 0,
                    messageCount: [1258 + 252, 30, 1258 + 251, 20, 1258 + 243, 15, 1258 + 233],
                },
                4: {
                    primary: 0,
                    junior: 1192,
                    highSchool: 0,
                    teacher: 114,
                    contract: 0,
                    messageCount: [1192 + 112, 30, 1192 + 104, 20, 1192 + 110, 15, 1192 + 111],
                },
                3: {
                    primary: 0,
                    junior: 2271,
                    highSchool: 0,
                    teacher: 231,
                    contract: 0,
                    messageCount: [2271 + 221, 30, 2271 + 224, 20, 2271 + 227, 15, 2271 + 224],
                },
                2: {
                    primary: 2002,
                    junior: 769,
                    highSchool: 0,
                    teacher: 155,
                    contract: 0,
                    messageCount: [2771 + 145, 30, 2771 + 152, 20, 2771 + 151, 15, 2771 + 149],
                },
                1: {
                    primary: 189,
                    junior: 0,
                    highSchool: 0,
                    teacher: 28,
                    contract: 0,
                    messageCount: [189 + 27, 30, 189 + 26, 20, 189 + 24, 15, 189 + 22],
                },
                0: {
                    primary: 189,
                    junior: 0,
                    highSchool: 0,
                    teacher: 28,
                    contract: 0,
                    messageCount: [189 + 27, 30, 189 + 26, 20, 189 + 24, 15, 189 + 22],
                },
            },
            currentSchool: {},
            currentId: '',
            msg: 'jacks',
            temperatureAnomalies: 0
        }
    },
    beforeCreate() {
        // 数据大屏跳转到此页面 展示当前学校数据
        if (this.$route.query.obj) {
            this.$store.dispatch('team/setCurrTeam', JSON.parse(this.$route.query.obj))
        }
    },
    async created() {
        for (const key in this.tabsList) {
            if (Object.hasOwnProperty.call(this.tabsList, key)) {
                let element = this.tabsList[key]
                if (key == 12) {
                    element.contract = await this.getRandom(0.1, 0.25)
                } else {
                    element.contract = await this.getRandom()
                }
            }
        }

        this.currentId = this.$route.query?.obj?.id || this.$store.state.team.currTeam.id
        this.currentSchool = this.tabsList[this.currentId]
    },
    mounted() {
        this.currentId = this.$route.query?.obj?.id || this.$store.state.team.currTeam.id
        console.log("this.tabsList[this.currentId]", this.tabsList, this.currentId)
        this.lineData = this.tabsList[this.currentId]['messageCount']

        // this.getPersonnelPount()
        this.getCampusNoticeList()
        // this.getMsdMessage()
        this.getSupplementaryCardList()
        this.getHikMessageList()
        this.getStudentApprove()
        // this.topChartInIt(); //挂在图表

        timeOut = setInterval(() => {
            this.getHikMessageList()
            // this.getMsdMessage()
            this.getSupplementaryCardList()
            this.getStudentApprove()
            // this.$notify({
            //     title: '数据已刷新',
            //     type: 'success', //success, warning, info, error
            //     duration: 2000,
            // })
        }, 1000 * 30)
    },
    beforeRouteLeave(to, from, next) {
        clearInterval(timeOut)
        next()
    },
    methods: {
        async getRandom(min = 0.2, max = 0.45) {
            let num = Math.random()
            if (min <= num && num <= max) {
                return (num * 100).toFixed(2) + '%'
            } else {
                return this.getRandom(min, max)
            }
        },
        // 获取学校人员统计
        async getPersonnelPount() {
            let {code, data} = await this.$api.dashboard.dashboard.getPersonnelPount({id: this.$store.state.team.currTeam.id})
            if (code === 200) {
                this.counts = data
            }
        },
        // 获取请假列表
        async getStudentApprove(approveStatus) {
            let {code, data} = await this.$api.studentLeave.leaveList.getStudentApproveList({limit: 1, page: 1, approveStatus})
            if (code === 200) {
                this.leaveTableData = data.records
                this.leaveTotal = data.total
            }
        },

        // 请假详情
        handleShowDetail(detail) {
            this.showApplyReasonDetail = true
            this.applyReasonDetail = detail
        },

        // 审批结果
        handleShowaApproveResult(detail) {
            this.showapproveResult = true
            this.approveResult = detail
        },
        // 消息
        handleMsgInfo(detail) {
            this.showMsgInfo = true
            this.msgInfo = detail
        },

        // 获取通知列表
        async getCampusNoticeList() {
            let {code, data} = await this.$api.schoolApplication.schoolMessage.getCampusNoticeList({limit: 5, page: 1})
            this.noticTableData = data.records
        },
        // 获取宿舍考勤列表
        async getMsdMessage() {
            let {code, data} = await this.$api.schoolConfig.hikMessage.getOldHikMessageList({limit: 5, page: 1, schoolId: 9})
            this.msdMessagData = data.records
            if (this.msdMessagData.length > 0) {
                this.currentAvayar = JSON.parse(JSON.parse(this.msdMessagData[0].dataTxt)).pictureURL
            }
        },
        // 获取补卡列表
        async getSupplementaryCardList() {
            let {code, data} = await this.$api.schoolApplication.supplementaryCard.getSupplementaryCardList({limit: 5, page: 1})
            this.mentaryCardData = data.records
            this.mentaryCarTotal = data.total
        },

        // 获取日志列表
        async getHikMessageList() {
            let {code, data} = await this.$api.schoolConfig.hikMessage.getHikMessageList({limit: 5, page: 1})
            this.hikMessageData = data.records
            if (this.hikMessageData.length > 0) {
                this.currentAvayar = JSON.parse(this.hikMessageData[0].dataTxt).pictureURL
            }
        },
        handleClick({paneName, label}) {
            if (paneName == '-1') {
                this.getStudentApprove()
            } else {
                this.getStudentApprove(paneName)
            }
        },
        // 顶部图表初始化
        topChartInIt() {
            this.topChart1()
            this.topChart2()
            // this.topChart3();
            // this.bottomLeftChart2();
            // this.bottomLeftChart3();
            // this.bottomLeftChart4();
        },
        topChart1() {
            this.chart.topChart1 = Echarts.init(this.$refs['top-chart-1'])
            // 绘制图表
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return `${params.name}:${params.data}`
                    },
                },
                xAxis: {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                    ],

                    axisLine: {
                        //坐标轴轴线相关设置。
                        show: false,
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        color: '#BCBCBC',
                        fontSize: 9,
                    },
                },
                grid: {
                    right: 0,
                    top: 0,
                    left: 0,
                    bottom: 0,
                },
                yAxis: {
                    type: 'value',
                    // 分隔线
                    splitLine: {
                        show: false,
                    },
                    // 坐标轴轴线
                    axisLine: {
                        show: false,
                    },
                    // 坐标轴刻度
                    axisTick: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                    },
                },
                series: [
                    {
                        symbol: 'none', //取消小圆点
                        step: false,
                        data: [1, 3, 2, 4, 3, 5, 4, 4, 5, 4, 5, 2, 2, 2, 5, 4, 7],
                        type: 'line',
                        areaStyle: {
                            //区域填充样式。设置后显示成区域面积图。
                            color: '#FF7A8C',
                            opacity: 1,
                        },
                        emphasis: {
                            //折线图的高亮状态
                        },
                        lineStyle: {
                            //线条样式。
                            color: '#FF7A8C',
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: '#FF7A8C',
                            borderColor: '#FF7A8C',
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                ],
            }
            this.chart.topChart1.setOption(option)
        },
        topChart2() {
            this.chart.topChart2 = Echarts.init(this.$refs['top-chart-2'])
            // 绘制图表
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return `${params.name}:${params.data}`
                    },
                },
                xAxis: {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                        '周一',
                    ],

                    axisLine: {
                        //坐标轴轴线相关设置。
                        show: false,
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        color: '#BCBCBC',
                        fontSize: 9,
                    },
                },
                grid: {
                    right: 0,
                    top: 0,
                    left: 0,
                    bottom: 0,
                },
                yAxis: {
                    type: 'value',
                    // 分隔线
                    splitLine: {
                        show: false,
                    },
                    // 坐标轴轴线
                    axisLine: {
                        show: false,
                    },
                    // 坐标轴刻度
                    axisTick: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                    },
                },
                series: [
                    {
                        symbol: 'none', //取消小圆点
                        step: false,
                        data: [1, 3, 2, 4, 3, 5, 4, 4, 5, 4, 5, 2, 2, 2, 5, 4, 7],
                        type: 'bar',
                        areaStyle: {
                            //区域填充样式。设置后显示成区域面积图。
                            color: '#52C1F5',
                            opacity: 1,
                        },
                        emphasis: {
                            //折线图的高亮状态
                        },
                        lineStyle: {
                            //线条样式。
                            color: '#52C1F5',
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: '#52C1F5',
                            borderColor: '#52C1F5',
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                ],
            }
            this.chart.topChart2.setOption(option)
        },
        topChart3() {
            this.chart.topChart3 = Echarts.init(this.$refs['top-chart-3'])
            //反方向剩下部分的样式
            const BorderWidth = '8'
            const placeHolderStyle = {
                normal: {
                    label: {
                        show: false,
                        position: 'outside',
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5,
                    },
                    /* color: "rgba(0,0,0,0)",
         borderColor: "rgba(0,0,0,0)",*/
                    borderWidth: BorderWidth,
                    /*shadowBlur: 40,*/
                    borderColor: '#E9E9E9',
                },
                /*    emphasis: {
                    color: "#dedede",
                    borderColor: "#dedede",
                    borderWidth: 0
                } */
            }
            // 绘制图表
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return `${params.data.name} : ${(params.data.value / (100 + 200)).toFixed(1) * 100}%`
                    },
                },
                title: {
                    /*subtext: '纯属虚构',*/
                    left: 'center',
                },
                series: [
                    {
                        name: '产品销售',
                        type: 'pie',
                        clockWise: true,
                        hoverAnimation: false,
                        radius: ['80%', '75%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                    length: 100,
                                    smooth: 0.5,
                                },
                                borderWidth: BorderWidth,
                                /* shadowBlur: 40,*/
                                borderColor: '#0099FF',
                                /*  shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
                            },
                        },
                        data: [
                            {
                                value: 200,
                                name: '销售总数',
                            },
                            {
                                value: 100,
                                name: '未销售',
                                itemStyle: placeHolderStyle,
                            },
                        ],
                    },
                ],
            }
            this.chart.topChart3.setOption(option)
        },
        bottomLeftChart2() {
            this.chart.bottomLeftChart2 = Echarts.init(this.$refs['bottom-left-chart-2'])
            // 绘制图表
            const grid = {
                right: 30,
                top: 20,
                left: 30,
                bottom: 50,
            }
            const option = {
                grid,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: true,
                    data: ['预计销售金额', '概率金额'],
                    top: 'bottom',
                    itemWidth: 10,
                    itemHeight: 10,
                },

                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLabel: {
                            color: '#8A8A8A',
                        },

                        axisLine: {
                            lineStyle: {
                                color: '#8A8A8A',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        show: true,
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#8A8A8A',
                        },
                        splitLine: {
                            // show: false,
                            lineStyle: {
                                color: ['#EAEAEA'],
                                type: 'dashed',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '预计销售金额',
                        type: 'bar',
                        data: [21, 23, 34, 12, 34, 23, 54, 21, 56, 23, 12, 34],
                        color: '#6AC9F6',
                    },
                    {
                        name: '概率金额',
                        type: 'bar',
                        data: [22, 12, 23, 34, 12, 23, 54, 44, 12, 23, 34, 12],
                        color: '#95DB9A',
                    },
                ],
            }
            this.chart.bottomLeftChart2.setOption(option)
        },
        bottomLeftChart3() {
            this.chart.bottomLeftChart3 = Echarts.init(this.$refs['bottom-left-chart-3'])
            // 绘制图表
            const grid = {
                right: 30,
                top: 20,
                left: 30,
                bottom: 50,
            }
            const option = {
                grid,
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    show: true,
                    data: ['预计销售金额', '概率金额'],
                    top: 'bottom',
                    itemWidth: 10,
                    itemHeight: 10,
                },

                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLabel: {
                            color: '#8A8A8A',
                        },

                        axisLine: {
                            lineStyle: {
                                color: '#8A8A8A',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        show: true,
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#8A8A8A',
                        },
                        splitLine: {
                            // show: false,
                            lineStyle: {
                                color: ['#EAEAEA'],
                                type: 'dashed',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '预计销售金额',
                        type: 'bar',
                        data: [21, 23, 34, 12, 34, 23, 54, 21, 56, 23, 12, 34],
                        color: '#FD8D9D',
                    },
                    {
                        name: '概率金额',
                        type: 'bar',
                        data: [22, 12, 23, 34, 12, 23, 54, 44, 12, 23, 34, 12],
                        color: '#88AEFB',
                    },
                ],
            }
            this.chart.bottomLeftChart3.setOption(option)
        },
        bottomLeftChart4() {
            this.chart.bottomLeftChart4 = Echarts.init(this.$refs['bottom-left-chart-4'])
            // 绘制图表
            const data = [
                {value: 123, name: '总会员数'},
                {value: 342, name: '消费会员数'},
                {value: 50, name: '到店会员数'},
                {value: 342, name: '消费会员数'},
                {value: 342, name: '消费会员数'},
            ]
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: ({data}) => {
                        return `${data.name}:${data.value}`
                    },
                },
                series: [
                    {
                        radius: '100%',
                        type: 'funnel',
                        right: 120,
                        top: 0,
                        left: 120,
                        bottom: 0,
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'right',
                            // position: "inside",
                            // formatter: e => {
                            //     let dataTotal = 0;
                            //     option.series[0].data.forEach(({ value }) => {
                            //         dataTotal += value;
                            //     });
                            //     return ((e.value / dataTotal) * 100).toFixed(2) + "%";
                            // },
                            // color: "#fff"
                        },
                        toolbox: {
                            show: true,
                        },
                        labelLine: {
                            length: 20,
                            lineStyle: {
                                width: 1,
                                type: 'solid',
                            },
                        },
                        itemStyle: {
                            opacity: 0.7,
                            color: (params) => {
                                const colorList = ['#45D9DA', '#FEC95A', '#6CCAF6', '#95DB9A', '#FF8E9D']
                                return colorList[params.dataIndex]
                            },
                        },
                        emphasis: {
                            label: {
                                fontSize: 20,
                            },
                        },
                        data,
                    },
                    {
                        radius: '100%',
                        type: 'funnel',
                        right: 120,
                        top: 0,
                        left: 120,
                        bottom: 0,
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            position: 'inside',
                            formatter: (e) => {
                                let dataTotal = 0
                                option.series[0].data.forEach(({value}) => {
                                    dataTotal += value
                                })
                                return ((e.value / dataTotal) * 100).toFixed(0) + '%'
                            },
                            color: '#fff',
                        },
                        toolbox: {
                            show: true,
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid',
                            },
                        },
                        itemStyle: {
                            opacity: 0.7,
                            color: (params) => {
                                const colorList = ['#45D9DA', '#FEC95A', '#6CCAF6', '#95DB9A', '#FF8E9D']
                                return colorList[params.dataIndex]
                            },
                        },
                        emphasis: {
                            label: {
                                fontSize: 20,
                            },
                        },
                        data,
                    },
                ],
            }
            this.chart.bottomLeftChart4.setOption(option)
        },
    },
}
</script>
<style lang="scss" scoped>
.sc-home {
    background-color: #f7f7f7;
    padding: 10px 20px;

    /deep/ .box {
        border-radius: 30px;
        height: 320px;
        overflow: hidden;
        background: linear-gradient(180deg, #e8f2ff 0%, rgba(255, 255, 255, 0) 100%);
        margin-bottom: 20px;
        // border: 1px solid red;
        padding: 0 15px;

        .el-table {
            background: transparent !important;
        }
    }

    .top {
        // margin-top: 50px;
        .card-list {
            height: 154px;
            background-image: url('/static/admin/img/header-bg.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
                flex: 1;
                color: $t-color-2;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .title {
                    height: 31px;
                    width: 100%;
                    font-size: 14px;

                    span {
                        margin-top: 10px;
                    }

                    .saasIcon {
                        cursor: pointer;
                        color: $t-color-2;
                        font-size: 20px;
                        font-weight: bold;
                    }
                }

                .chart-num {
                    width: 100%;
                    color: #000;
                    font-size: 30px;
                    font-weight: bold;
                    text-align: center;
                }
            }
        }
    }

    .bottom {
        display: flex;
        margin-top: 20px;
        overflow-x: hidden;

        .bottom-left {
            width: 30%;
            margin-right: 30px;

            .new-list {
                width: 100%;
                height: 411px;
                overflow-y: auto;
                display: flex;
                flex-direction: row;

                .news-box {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .new-item {
                        width: 100%;
                        cursor: pointer;
                        margin-bottom: 10px;
                        text-align: left;

                        .left {
                            min-width: 20%;
                            color: $t-color-1;
                            font-size: 14px;
                        }

                        .right {
                            color: $t-color-2;
                            font-size: 12px;
                        }
                    }
                }
            }

            .kaoqin-main {
                height: 300px;

                .kaoqin-top {
                    height: 40%;

                    .avatar {
                        width: 120px;
                        height: 120px;
                        background-size: 100% !important;
                        border-radius: 50%;
                        margin-right: 15px;
                    }
                }

                .kaoqin-bottom {
                    height: 40%;
                }
            }
        }

        .bottom-right {
            flex: 1;
        }
    }
}
</style>
